<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../css/listloading.base.css">
		<link rel="stylesheet" type="text/css" href="../css/listloading.min.css">
		<script type="text/javascript" src="../js/rem.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/require.js"></script>
		<script type="text/javascript" src="../js/listloading.iconfont.js"></script>
	</head>
	<style type="text/css">
		#wrapper { overflow: hidden; width: 100%; }
	</style>
	<body>
		<div id="content">
			<h3 class="header f-pr">
				<span>我的借款</span>
				<i class="icon-angle-left f-pa" @tap="back()"></i>
			</h3>
			<div class="m-borrowrecord">
				<div class="tabs">
					<a class="tab active" data-id="1">借入总表</a>
					<a class="tab" data-id="2">借款记录</a>
				</div>
				<div id="wrapper">
					<div id="scroller">
						<div id="item1">
							<ul class="record-list record-list-1">
								<li>
									<p class="f-fl">
										<span>正在融资笔数</span>
										<span>目前正在投标中，尚未确定借入的金额</span>
									</p>
									<p class="f-fr" v-text="biding_count">0</p>
								</li>
								<li>
									<p class="f-fl">
										<span>正在还款笔数</span>
										<span>进入偿还期的借入</span>
									</p>
									<p class="f-fr" v-text="repayment_count">0</p>
								</li>
								<li>
									<p class="f-fl">
										<span>还清的借入</span>
										<span>已经全部收回的借入的本金总额</span>
									</p>
									<p class="f-fr" v-text="complete_count">0</p>
								</li>
							</ul>
							<ul class="record-list record-list-1">
								<li>
									<p class="f-fl">
										<span>累计借入总额</span>
										<span>注册至今，您累计借入的金额</span>
									</p>
									<p class="f-fr" v-text="borrow_amount">0</p>
								</li> 
								<li>
									<p class="f-fl">
										<span>融资充值总金额</span>
									</p>
									<p class="f-fr" v-text="recharge_total">0</p>
								</li> 
								<li>
									<p class="f-fl">
										<span>融资提现总金额</span>
									</p>
									<p class="f-fr" v-text="withdrawal_total">0</p>
								</li> 
							</ul>
						</div>
						<div id="item2" class="hide">
							<div>
								<template v-if="borrowlist.length > 0">
									<ul class="bid-list">
										<template v-for="item in borrowlist">
											<li>
												<h3>{{item.name}}</h3>
												<div class="info clearfix">
													<p>
														<span><b>{{item.amount}}</b></span>
														<span>借入金额(元)</span>
													</p>
													<p>
														<span>{{item.rate}}.<small>00</small></span>
														<span>预期年化(%)</span>
													</p>
												</div>
												<p class="bid-number">
													<span>借款时间：{{item.date_time}}</span>
													<span class="f-fr">借款期限：{{item.dead_line}}</span>
												</p>
											</li>
										</template>
									</ul>
								</template>
								<template v-else>
									<div class="nodata nodata-1">
										<p class="img"><img src="../images/nodata-1.png"></p>
										<p class="text">暂无数据</p>
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			require.config({
				paths: {
					'vue': '../js/vue.min',
					'iscroll': '../js/iscroll.min',
					'listloading': '../js/listloading.min',
					'encryption': '../js/md5.min'
				}
			});

			mui.plusReady(function(){
				require(['iscroll', 'listloading', 'vue','encryption'], function(){
					var md5 = require('encryption');
					var Listloading = require('listloading');
					var Vue = require('vue');
					var page_index = 1, page_size = 4, page_count = 10;

					$('#wrapper, .listloadingClass').height($(window).height() - 20);

					var vm = new Vue({
						el: '#content',
						data: {
							borrowlist: [],
							biding_count: '',
							repayment_count: '',
							complete_count: '',
							borrow_amount: '',
							recharge_total: '',
							withdrawal_total: ''
						},

						methods: {
							back: function(){
								mui.back();
							}
						}
					});

					var borrow = {
						init: function(){
							this.borrowMessage();
						},

						borrowList: function(cb, flag, page_index, page_size){
							if(flag){
								return cb(flag);
							}
							mui.ajax(base + 'account/borrowcreditlist', {
								type: 'get',
								data: {
									'id': plus.storage.getItem('user_id'),
									'page_index': 1,
									'page_size': 10
								},
								dataType: 'json',
								headers: sign(md5),
								success: function(data){
									vm.borrowlist = data.list;
									page_index = data.page_index;
									page_count = data.page_total; 
									if(data.page_index == 1){
										vm.borrowlist = data.list;
									}else{
										for(var i = 0; i < data.list.length; i++){
											vm.borrowlist.push(data.list[i]);
										}
									}
									 cb(flag);
								},
								error: function(data){
									console.error(data.message);
								}
							});
						},

						borrowMessage: function(){
							mui.ajax(base + 'account/borrowmessage', {
								type: 'get',
								data: {'id': plus.storage.getItem('user_id')},
								dataType: 'json',
								headers: sign(md5),
								success: function(data){
									vm.biding_count = data.biding_count;
									vm.repayment_count = data.repayment_count;
									vm.complete_count = data.complete_count;
									vm.borrow_amount = data.borrow_amount;
									vm.recharge_total = data.recharge_total;
									vm.withdrawal_total = data.withdrawal_total;
								},
								error: function(){
									console.error('error');
								}
							});
						}
					};

					borrow.init();

					var listloading = new Listloading('#wrapper', {
						disableTime: true,
						pullUpAction: function(cb){
							var flg = false;
							if(page_index + 1 > page_count){
								flg = true;
							}else{
								page_index++
							}
							return borrow.borrowList(cb, flg, page_index, page_size);
						},
						pullDownAction: function(cb){
							page_index = 1;
							return borrow.borrowList(cb, false, page_index, page_size);
						},
						Realtimetxt: '官人不要，请放开我！',
	        			loaderendtxt: '我是有底线的',
	        			iscrollOptions: {
		                    scrollbars: false   
		                }
					});

					$('.m-borrowrecord .tabs .tab').on('tap', function(){
						var that = $(this), id = parseInt($(this).attr('data-id'));
						if(!(that.hasClass('active'))){
							that.addClass('active').siblings('.tab').removeClass('active');

							for(var i = 1; i <= 2; i++){
								if(i == id){
									$('#item' + i).removeClass('hide');
								}else{
									$('#item' + i).addClass('hide');
								}
							}
						}
					});
				});
			});		
		</script>
	</body>
</html>